import React from 'react'
// 引入编辑器组件
import BraftEditor from 'braft-editor'
// 引入编辑器样式
import 'braft-editor/dist/index.css'
import { ContentUtils } from 'braft-utils'
import AliyunOSSUpload from '@/components/AliyunOSSUpload'
import './index.less'

export default class Editor extends React.Component {

	state = {
		// 创建一个空的editorState作为初始值
		editorState: BraftEditor.createEditorState(this.props.content || null)
	}

	// submitContent = async () => {
	//     // 在编辑器获得焦点时按下ctrl+s会执行此方法
	//     // 编辑器内容提交到服务端之前，可直接调用editorState.toHTML()来获取HTML格式的内容
	//     const htmlContent = this.state.editorState.toHTML()
	//     const result = await saveEditorContent(htmlContent)
	// }
	
	// 编辑器内容改变时执行
	handleEditorChange = (editorState) => {
		// 更新编辑器的状态
		this.setState({ editorState })
		// 判空
		if (!editorState.isEmpty()) {
			// 编辑器内容提交到服务端之前，可直接调用editorState.toHTML()来获取HTML格式的内容
			const content = editorState.toHTML()
			// 将编辑器输入的内容传递给父组件的表单
			this.props.setDetails(content)
		} else {
			this.props.setDetails('')
		}
	}

	// 图片上传完成后，执行的回调，用来显示在编辑器中
	insertImage = url => {
		this.setState({
			editorState: ContentUtils.insertMedias(this.state.editorState, [{
				type: 'IMAGE',
				url
			}])
		})
	}

	render() {
		// 自定义控件 ———— 插入图片
		const extendControls = [
			{
				key: 'antd-uploader',
				type: 'component',
				component: (
					<AliyunOSSUpload
						accept="image/*"
						showUploadList={false}
						insertImage={this.insertImage}
					>
						{/* 这里的按钮最好加上type="button"，以避免在表单容器中触发表单提交，用Antd的Button组件则无需如此  */}
						<button type="button" className="control-item button upload-button" data-title="插入图片">
							插入图片
						</button>
					</AliyunOSSUpload>
				)
			}
		]
		const { editorState } = this.state
		return (
			<div className="my-editor">
				<BraftEditor
					value={editorState}
					onChange={this.handleEditorChange}
					// onSave={this.submitContent}
					extendControls={extendControls}
				/>
			</div>
		)

	}

}


